<template>
    <!-- 页面主容器 -->
    <div class="page">
        <!-- 页面标题 -->
        <div class="title">编辑外协单位</div>

        <!-- 表单卡片容器 -->
        <div class="form-card">
            <!-- 表单网格布局 -->
            <div class="grid">
                <!-- 单位名称字段（必填） -->
                <div class="item required">
                    <label>单位名称：</label>
                    <div class="control">
                        <input v-model="form.unitName" placeholder="请输入单位名称" />
                        <p v-if="errors.unitName" class="err">{{ errors.unitName }}</p>
                    </div>
                </div>

                <!-- 邮箱字段（可选） -->
                <div class="item">
                    <label>邮箱：</label>
                    <div class="control">
                        <input v-model="form.email" placeholder="请输入邮箱" />
                        <p v-if="errors.email" class="err">{{ errors.email }}</p>
                    </div>
                </div>

                <!-- 座机电话字段（可选） -->
                <div class="item">
                    <label>座机电话：</label>
                    <div class="control">
                        <input v-model="form.landlinePhone" placeholder="请输入座机电话" />
                    </div>
                </div>

                <!-- 手机号字段（必填） -->
                <div class="item required">
                    <label>手机号：</label>
                    <div class="control">
                        <input v-model="form.phoneNumber" placeholder="请输入手机号" />
                        <p v-if="errors.phoneNumber" class="err">{{ errors.phoneNumber }}</p>
                    </div>
                </div>

                <!-- 地址字段（必填） -->
                <div class="item required">
                    <label>地址：</label>
                    <div class="control">
                        <input v-model="form.address" placeholder="请输入地址" />
                        <p v-if="errors.address" class="err">{{ errors.address }}</p>
                    </div>
                </div>

                <!-- 备注字段（可选） -->
                <div class="item">
                    <label>备注：</label>
                    <div class="control">
                        <textarea v-model="form.remarks" placeholder="请输入备注"></textarea>
                    </div>
                </div>

                <!-- 创建人字段（必填） -->
                <div class="item required">
                    <label>创建人：</label>
                    <div class="control">
                        <input v-model="form.createdBy" placeholder="请输入创建人" />
                        <p v-if="errors.createdBy" class="err">{{ errors.createdBy }}</p>
                    </div>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="actions">
                <button class="primary" :disabled="submitting" @click="submit">更新</button>
                <button class="ghost" @click="cancel">取消</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { read, write } from '@/assets/Axios/axiosHttple'

/**
 * 外协单位表单数据模型接口
 * 定义了编辑外协单位时需要填写的所有字段
 */
type FormModel = {
    id: number              // 单位ID
    unitName: string        // 单位名称（必填）
    email: string           // 邮箱地址（可选）
    landlinePhone: string   // 座机电话（可选）
    phoneNumber: string     // 手机号码（必填）
    address: string         // 单位地址（必填）
    remarks: string         // 备注信息（可选）
    createdBy: string       // 创建人（必填）
}

// 表单数据响应式对象，存储用户输入的外协单位信息
const form = reactive<FormModel>({
    id: 0,              // 单位ID
    unitName: '',       // 单位名称
    email: '',          // 邮箱
    landlinePhone: '',  // 座机电话
    phoneNumber: '',    // 手机号
    address: '',        // 地址
    remarks: '',        // 备注
    createdBy: ''       // 创建人
})

// 提交状态标识，防止重复提交
const submitting = ref(false)
// 表单验证错误信息存储对象
const errors = reactive<Record<string, string>>({})

// 路由实例
const router = useRouter()
const route = useRoute()

/**
 * 表单验证函数
 * 验证必填字段和格式是否正确
 * @returns {boolean} 验证是否通过
 */
function validate(): boolean {
    // 清空之前的错误信息
    Object.keys(errors).forEach(k => delete errors[k])

    // 验证必填字段
    if (!form.unitName) errors.unitName = '请输入单位名称'
    if (!form.phoneNumber) errors.phoneNumber = '请输入手机号'
    // 验证手机号格式（11位数字）
    if (!/^\d{11}$/.test(form.phoneNumber)) errors.phoneNumber = '手机号格式不正确'
    // 验证邮箱格式（如果填写了邮箱）
    if (form.email && !/^[\w-.]+@[\w-]+\.[\w-.]+$/.test(form.email)) errors.email = '邮箱格式不正确'
    if (!form.address) errors.address = '请输入地址'
    if (!form.createdBy) errors.createdBy = '请输入创建人'

    // 返回验证结果
    return Object.keys(errors).length === 0
}

/**
 * 加载详情
 */
async function fetchDetail() {
    try {
        const idParam = route.query.id ?? route.params.id
        const id = Number(Array.isArray(idParam) ? idParam[0] : idParam)
        if (!id || Number.isNaN(id)) {
            alert('缺少外协单位ID参数')
            router.back()
            return
        }

        // 仅保留：5049 列表匹配（你当前后端可稳定返回数据的方式）
        let d: any = null
        try {
            const res = await read.get('baseinforead/api/External/GetExternalList', { params: { PageIndex: 1, PageSize: 2000 } })
            const j = (res?.data) || { data: [] }
            const arr = Array.isArray(j?.data?.data) ? j.data.data : (Array.isArray(j?.data) ? j.data : [])
            d = (arr || []).find((x: any) => Number(x?.id) === id) || null
        } catch { }

        if (!d) throw new Error('not found')

        Object.assign(form, {
            id: d.id ?? id,
            unitName: d.unitName ?? '',
            email: d.email ?? '',
            landlinePhone: d.landlinePhone ?? '',
            phoneNumber: d.phoneNumber ?? '',
            address: d.address ?? '',
            remarks: d.remarks ?? '',
            createdBy: d.createdBy ?? ''
        })
    } catch (e) {
        console.error('获取外协单位详情失败', e)
        alert('获取外协单位详情失败')
        router.back()
    }
}

/**
 * 提交更新
 */
async function submit() {
    if (!validate()) return
    submitting.value = true
    try {
        const payload = {
            id: form.id,
            unitName: form.unitName,
            email: form.email,
            landlinePhone: form.landlinePhone,
            phoneNumber: form.phoneNumber,
            address: form.address,
            remarks: form.remarks,
            lastModifiedBy: '张三'
        }

        const res = await write.post('baseinfowrite/api/External/UpdateExternalInfo', payload)
        const json: any = res?.data ?? {}

        if (res?.status === 200 && (json?.code === 200 && (json?.data === true || json?.data === 1))) {
            alert('更新成功')
            window.location.href = '/GetExternalCooperationUnits?refresh=1'
        } else {
            alert(json?.message || '更新失败')
        }
    } catch (e) {
        console.error('更新外协单位失败', e)
        alert('更新外协单位失败')
    } finally {
        submitting.value = false
    }
}

onMounted(fetchDetail)

/**
 * 取消操作
 * 返回上一页，不保存任何数据
 */
function cancel() {
    router.back()
}


</script>


<style scoped>
/* 页面主容器样式 */
.page {
    padding: 12px 16px 24px;
    font-size: 14px;
    color: #333;
}

/* 页面标题样式 */
.title {
    border-left: 3px solid #2d8cf0;
    padding-left: 8px;
    margin-bottom: 12px;
}

/* 表单卡片容器样式 */
.form-card {
    background: #fff;
    border: 1px solid #ebedf0;
    border-radius: 4px;
    padding: 16px;
}

/* 表单网格布局样式 */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}

/* 表单项样式 */
.item {
    display: contents;
}

/* 表单项标签样式 */
.item>label {
    justify-self: end;
    align-self: center;
    color: #666;
}

/* 表单项控件容器样式 */
.item>.control {
    align-self: center;
}

/* 必填字段标签前添加红色星号 */
.item.required>label::before {
    content: '* ';
    color: #f56c6c;
    margin-right: 2px;
}

/* 输入框和文本域基础样式 */
input,
textarea {
    width: 360px;
    box-sizing: border-box;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}

/* 文本域特殊样式 */
textarea {
    height: 80px;
    padding: 8px;
    resize: vertical;
}

/* 错误信息样式 */
.err {
    margin-top: 4px;
    color: #f56c6c;
    font-size: 12px;
}

/* 操作按钮区域样式 */
.actions {
    margin-top: 18px;
}

/* 按钮基础样式 */
button {
    height: 34px;
    padding: 0 18px;
    border: 1px solid #dcdfe6;
    background: #fff;
    color: #606266;
    border-radius: 4px;
    cursor: pointer;
}

/* 主要按钮样式（更新按钮） */
button.primary {
    background: #409eff;
    color: #fff;
    border-color: #409eff;
    margin-right: 8px;
}

/* 次要按钮样式（取消按钮） */
button.ghost {
    margin-left: 6px;
}

/* 禁用状态按钮样式 */
button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 响应式设计 - 小屏幕适配 */
@media (max-width: 980px) {
    .grid {
        grid-template-columns: 1fr;
    }

    input,
    textarea {
        width: 100%;
    }

    .item>label {
        justify-self: start;
    }
}
</style>
